<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <title>光速洗车</title>
</head>
<body>

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span> 光速洗车
    <span class="c-gray en">&gt;</span> 历史订单
</nav>
<div class="page-container">
    <form id="orderHistoryForm" class="form-inline">
        <div class="form-group">
            <label class="control-label" title="">
                日期类型：
            </label>
            <select class="form-control" name="payType" id="orderHistoryPayType">
                <option value="1" selected="selected">周</option>
                <option value="2">月</option>
            </select>
        </div>&nbsp;
        <div class="form-group">
            <label class="control-label" title="">
                开始时间：
            </label>
            <input id="orderHistoryTime" name="addTimeStart" type="text" onfocus="WdatePicker()" readonly="readonly" class="form-control Wdate" style="width:150px;">
        </div>
        <span onclick="platformMerchantOrderHistoryFun.searchAction();" class="btn btn-default" type="submit" >查询 <i class="glyphicon glyphicon-search"></i></span>
    </form>
    <div style="background: white;border-radius: 4px;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);box-shadow: 0 1px 1px rgba(0,0,0,.05);">
        <div id="order-chart" style="width: 100%;height: 580px;"></div>
    </div>
</div>
<script type="text/javascript">
    /*活动管理 platformMerchantOrderHistoryFun*/
    var platformMerchantOrderHistoryFun;

    platformMerchantOrderHistoryFun = {
        init : function () {
            let _this = this;
            var time = _this.time(0);
            $("#orderHistoryTime").val(time);

            _this.bootstrapvalidatorForm();

            _this.onloadEchart('洗车量按周统计');

        },
        onloadEchart : function (text) {
            //绘制echarts图表
            $.ajax({
                type: "get",
                url: "cust/getOrderHistory",
                data:$("#orderHistoryForm").serialize(),
                dataType: "json",
                success : function(json) {
                    if(json.state){
                        let myChart =  echarts.init($("#order-chart")[0]);
                        option = {
                            title : {
                                text: text
                            },
                            tooltip : {
                                trigger: 'axis'
                            },
                            toolbox: {
                                show : true,
                                feature : {
                                    mark : {show: true},
                                    dataView : {show: true, readOnly: false},
                                    magicType : {show: true, type: ['line', 'bar']},
                                    restore : {show: true},
                                    saveAsImage : {show: true}
                                }
                            },
                            calculable : true,
                            xAxis : [
                                {
                                    type : 'category',
                                    data : json.data.time
                                }
                            ],
                            yAxis : [
                                {
                                    type : 'value'
                                }
                            ],
                            series : [
                                {
                                    name:'洗车量',
                                    type:'bar',
                                    barWidth: 20,
                                    data:json.data.num,
                                    markPoint : {
                                        data : [
                                            {type : 'max', name: '最大值'},
                                            {type : 'min', name: '最小值'}
                                        ]
                                    },
                                    markLine : {
                                        data : [
                                            {type : 'average', name: '平均值'}
                                        ]
                                    }
                                }
                            ]
                        };
                        myChart.setOption(option,true);
                    }

                },
                error:function () {
                    alert("error");
                }
            });
        },
        //按条件筛选查询
        searchAction : function () {
            let _this = this;
            var state = $("#orderHistoryPayType option:selected").val();
            var text = '';

            if(state == 1){
                text = '洗车量按周统计';
            }else {
                text = '洗车量按月统计';
            }
            _this.onloadEchart(text);
        },
        //bootstrap验证
        bootstrapvalidatorForm: function () {
            $('#autoActivity-form').bootstrapValidator({
                message: 'This value is not valid',
                excluded : [':disabled'],
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    activityName: {
                        validators: {
                            notEmpty: {
                                message: '活动名称不能为空'
                            },
                            stringLength: {
                                min: 2,
                                max: 100,
                                message: '服务名称长度必须在2到100位之间'
                            }
                        }
                    },
                    activityTitle: {
                        validators: {
                            notEmpty: {
                                message: '活动标题不能为空'
                            }
                        }
                    },
                    activityContent: {
                        validators: {
                            notEmpty: {
                                message: '活动内容不能为空'
                            }
                        }
                    },
                    startTimes: {
                        validators: {
                            notEmpty: {
                                message: '开始时间不能为空'
                            }
                        }
                    },
                    endTimes: {
                        validators: {
                            notEmpty: {
                                message: '结束时间不能为空'
                            }
                        }
                    }
                }
            });
        },
        //获取时间的方法
        time: function (index) {
            var today = new Date();
            today.setMonth(today.getMonth() + index);
            var h = today.getFullYear();
            var m = today.getMonth() + 1;
            var d = today.getDate();
            m = m < 10 ? "0" + m : m;
            d = d < 10 ? "0" + d : d;
            return h + "-" + m + "-" + d;
        }
    };

    platformMerchantOrderHistoryFun.init();
</script>
</body>
</html>